<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
	<title>Document</title>
	<link href="http://cdn.bootcss.com/fullPage.js/2.7.4/jquery.fullPage.css" rel="stylesheet">
	<style>
		body {
			color: #fff;
			font: 16px/1.8 "Microsoft Yahei", verdana;
		}
		/*
		.slide {
			text-align: center;
			font: 50px "Microsoft Yahei";
			color: red;
		}
*/
		
		.full-bg {
			background-repeat: no-repeat;
			background-size: cover;
			-webkit-background-size: cover;
			-moz-background-size: cover;
			-o-background-size: cover;
		}
		
		#img1 {
			background-image: url(1.jpg);
			background-position: center;
			/**  格式，filer: saturate(效果范围)
     *  效果范围，取值范围>=0的数字或百分数，1为无效果，0为灰度图
     */
			-webkit-filter: saturate(2);
			-moz-filter: saturate(2);
			-o-filter: saturate(2);
			-ms-filter: saturate(2);
			filter: saturate(2);
		}
		
		#img2 {
			background-image: url(2.jpg);
			background-position: center;
			background-attachment: fixed;
			/*			background-color: black;*/
			/**  格式，filer: sepia(效果范围)
     *  效果范围，取值范围为0-1或0-100%；0表示无效果，1或100%表示最大效果
     */
			/*
			-webkit-filter: sepia(100%);
			-moz-filter: sepia(100%);
			-o-filter: sepia(100%);
			-ms-filter: sepia(100%);
			filter: sepia(100%);
*/
		}
		
		#img3 {
			background-image: url(3.jpg);
			background-position: center;
			*/ -webkit-filter: grayscale(100%);
			-o-filter: grayscale(100%);
			-moz-filter: grayscale(100%);
			-ms-filter: grayscale(100%);
			filter: grayscale(100%);
		}
		
		.bg {
			height: 100%;
			left: 0;
			position: absolute;
			top: 0;
			width: 100%;
		}
		
		.bg5-4 {
			background: url(bg5-4.png) 50% 0 no-repeat;
		}
		
		.bg5-3 {
			animation: 20s linear 0s normal none infinite running bg5-3;
		}
		
		.bg5-3 {
			background: rgba(0, 0, 0, 0) url("bg5-3.png") no-repeat scroll 50% 0;
		}
		/* 第五屏动画 */
		
		.bg5-3 {
			-webkit-animation: bg5-3 20s linear infinite 0s;
			animation: bg5-3 30s linear infinite 0s;
		}
		
		@-webkit-keyframes bg5-3 {
			0% {
				background-position: 0 0;
			}
			100% {
				background-position: 0 100%;
			}
		}
		
		@keyframes bg5-3 {
			0% {
				background-position: 0 0;
			}
			100% {
				background-position: 0 100%;
			}
		}
		
		.player-button {
			position: fixed;
			z-index: 100;
			display: block;
			top: 10px;
			right: 10px;
			width: 36px;
			height: 36px;
			background-image: url(http://statics.xiumi.us/stc/images/music.png);
			background-size: 72px 36px;
			background-position: 0 0;
			background-repeat: no-repeat;
		}
		
		.player-button-stop {
			background-position: -36px 0;
		}
		
		.tx1 {
			position: absolute;
			font-size: 1.47em;
			top: 10%;
			left: 30%;
			width: 100%;
			margin-left: -255px;
			margin-top: 130px;
			opacity: 0;
		}
		
		.tx2 {
			position: absolute;
			font-size: 1.47em;
			top: 110%;
			left: 40%;
			width: 100%;
			margin-left: -255px;
			margin-top: 130px;
			opacity: 1;
			transition: all 1s;
		}
	</style>
	<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
	<!--	<script src="http://cdn.bootcss.com/jQuery-slimScroll/1.3.6/jquery.slimscroll.min.js"></script>-->
	<!--	<script src="http://cdn.bootcss.com/jquery-easing/1.3/jquery.easing.min.js"></script>-->
	<script src="http://cdn.bootcss.com/fullPage.js/2.7.4/jquery.fullPage.js"></script>
	<!--	<script src="http://www.batzaya.net/jquery.fullPage.js"></script>-->

	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=bDippwLGB3vf7hgOZLadOKnV"></script>


	<script src="http://cdn.bootcss.com/jQuery-slimScroll/1.3.6/jquery.slimscroll.min.js"></script>



	<script>
		$(document).ready(function () {

			var d = !0,
				f = $(".audio-source"),
				e = $(".player-button");
			e.click(function () {
				1 == d ? (f[0].pause(), e.addClass("player-button-stop"), d = !1) : (f[0].play(), e.removeClass("player-button-stop"), d = !0)
			})

			$('#fullpage').fullpage({
				verticalCentered: false,
				scrollingSpeed: 2000,
				anchors: ['page1', 'page2', 'page3'],
				css3: false,
				navigation: true,
				navigationPosition: 'right',
				navigationTooltips: ['Accept', 'Believe', 'Devoted'],
				showActiveTooltip: true,
				slidesNavigation: true,
				slidesNavPosition: 'top',
				controlArrows: false,
				fixedElements: '#but',
				//				scrollOverflow: true,
				afterLoad: function (anchorLink, index) {
					console.log("afterLoad:anchorLink=" + anchorLink + ";index=" + index);
					switch (index) {
					case 1:
						move('#t1').set('opacity', 1).duration('2s').end();

						move('#t2').set('top', '20%').duration('0.7s').end();
						break;
					case 2:
						move('#t3').set('opacity', 1).duration('2s').end();

						move('#t4').set('top', '20%').duration('0.7s').end();

						break;
					case 3:
						$.fn.fullpage.setAllowScrolling(false);
						setTimeout('window.location.href = "index.html"', 3000);
						break;

					}
				},
				onLeave: function (index, nextindex, direction) {
					console.log("Onleave:index=" + index + ";Nextindex=" + nextindex + ";direction=" + direction);
					switch (index) {
					case 1:
						move('#t1').set('opacity', 0).duration('1s').end();

						move('#t2').set('top', '110%').duration('1s').end();
						break;
					case 2:
						move('#t3').set('opacity', 0).duration('1s').end();

						move('#t4').set('top', '110%').duration('1s').end();
						break;
					case 3:

						break;

					}
				},
				afterRender: function (index, nextindex, direction) {
					console.log("Onleave:index=" + index + ";Nextindex=" + nextindex + ";direction=" + direction);
					switch (index) {
					case 1:
						break;
					case 2:
						break;
					case 3:
						break;
					}
				},
			});
		})
	</script>
</head>

<body>

	<div class="player-button" id="but">
		<audio class="audio-source ng-scope tn-page-editable" autoplay="autoplay" tn-page-editable="aud0" tn-page-editable-type="aud-link" ng-src="http://statics.xiumi.us/xmi/rc/gBkB/a/50d3dae52f38040bc34cda634aa2037e-sz_609885.mp3" src="http://statics.xiumi.us/xmi/rc/gBkB/a/50d3dae52f38040bc34cda634aa2037e-sz_609885.mp3"></audio>
	</div>

	<div id="fullpage">

		<div class="section" style="z-index: 22; background-color: rgb(109, 172, 174); transform: translate3d(0px, 0px, 0px);">
			<div class="slide full-bg" id="img1">
				<div class="bg bg5-3"></div>
				<!--				<div class="bg bg5-4"></div>-->
				<h1 class="tx1" id="t1">Well not that emotional,but I move the heart.</h1>
				<h1 class="tx2" id="t2"> 说好了不动情，我却动了心</h1>

			</div>

		</div>
		<div class="section">
			<div class="slide full-bg" id="img2">
				<div class="bg bg5-3"></div>
				<h1 class="tx1" id="t3">I am not a gentle person, but you do make gentle.</h1>
				<h1 class="tx2" id="t4"> 我不是温柔人，却为你做尽温柔事。</h1>
			</div>
		</div>
		<div class="section ">
			<div class="slide full-bg" id="img3">
				<div class="bg bg5-3"></div>

			</div>
		</div>

	</div>
	<script src="http://cdn.bootcss.com/move.js/0.3.3/move.min.js"></script>
</body>

</html>